<template>
  <el-form-item label="规格选项">
    <el-card shadow="never" class="w-full mb-3" v-for="i in sku_card_list" :key="i.id" v-loading="i.loading">
      <template #header>
        <div class="flex items-center">
          <el-input v-model="i.text" placeholder="规格名称" style="width:200px;" @change="handelUpdate(i)">
            <template #append>
              <el-icon><more/></el-icon>
            </template>
          </el-input>
          <el-button class="ml-auto" size="small"><el-icon><Top /></el-icon></el-button>
          <el-button size="small"><el-icon><Bottom /></el-icon></el-button>
          
          <el-popconfirm title="是否要删除该选项?" confirm-button-text="确认" cancel-button-text="取消" @confirm="handleDelete(i)">
            <template #reference>
              <el-button size="small"><el-icon><Delete /></el-icon></el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
      <!-- card body -->
      <SkuCardItem :skuCardId="i.id" />
    </el-card>
    <el-button type="success" size="small" :loading="btnLoading" @click="addSkuCardEvent">添加规格</el-button>

  </el-form-item>
</template>

<script setup>
import SkuCardItem from './SkuCardItem.vue';
import { 
  sku_card_list,
  addSkuCardEvent,
  btnLoading,
  handelUpdate,
  handleDelete 
} from "~/composables/useSku.js"
</script>

<style>
.el-card__header {
    @apply !p-2 bg-gray-50;
}
</style>